import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:provider/provider.dart';

import '../../../data/models/bt_user_info.dart';
import '../../../utils/bt_tool_utils.dart';
import '../../../widgets/bt_date_picker_widget.dart';
import '../../utils/bt_app_bar_utils.dart';
import '../../utils/bt_image_picker.dart';
import '../models/bt_modify_user_info_model.dart';

@RoutePage(name: "modifyUserInfoRoute")
class BtModifyUserInfoScreen extends StatelessWidget {
  const BtModifyUserInfoScreen({super.key, required this.userInfo});

  final BtUserInfo userInfo;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BtModifyUserInfoModel(userInfo)..loadUserInfo(),
      child: Consumer<BtModifyUserInfoModel>(builder: (context, model, _) {
        return Scaffold(
          backgroundColor: const Color(0xFFFFFFFF),
          appBar: appBar(context, '', null),
          body: Stack(
            children: [
              Container(
                height: double.infinity,
                padding: const EdgeInsets.only(left: 32, top: 68, right: 32),
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      InkWell(
                        child: Stack(
                          children: [
                            SizedBox(
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(49),
                                child: CachedNetworkImage(
                                  height: 98,
                                  width: 98,
                                  fit: BoxFit.fill,
                                  imageUrl: model.avatarUrl,
                                  placeholder: (context, url) => Container(
                                    height: 98,
                                    width: 98,
                                    decoration: BoxDecoration(
                                        color: Colors.white, borderRadius: BorderRadius.circular(49)),
                                  ),
                                  errorWidget: (context, url, error) => Container(
                                    height: 98,
                                    width: 98,
                                    decoration: BoxDecoration(
                                        color: Colors.white, borderRadius: BorderRadius.circular(49)),
                                  ),
                                ),
                              ),
                            ),
                            Positioned(
                              bottom: 0,
                              right: 0,
                              child: Image.asset(
                                'assets/images/bt_icon_camera.png',
                                height: 32,
                                width: 32,
                              ),
                            )
                          ],
                        ),
                        onTap: () {
                          showImagePickerModal(context, (thumbUrl) => model.setAvatarUrl(thumbUrl ?? ''));
                        },
                      ),
                      Container(
                        height: 44,
                        decoration: BoxDecoration(
                          color: const Color(0xFFF7F8FA),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        margin: const EdgeInsets.only(top: 32),
                        padding: const EdgeInsets.only(left: 20, right: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            const Text('Nick Name',
                                style: TextStyle(
                                    fontSize: 12, fontWeight: FontWeight.normal, color: Color(0x4d000000))),
                            Expanded(
                                child: TextField(
                              keyboardType: TextInputType.text,
                              textInputAction: TextInputAction.next,
                              autofocus: false,
                              textAlign: TextAlign.end,
                              style: const TextStyle(fontSize: 16, color: Color(0xFF404040)),
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                contentPadding: const EdgeInsets.all(10.0),
                                hintText: model.nickname,
                                hintStyle: const TextStyle(fontSize: 16, color: Color(0xFF404040)),
                              ),
                              onChanged: (value) => {model.setNickname(value)},
                            )),
                          ],
                        ),
                      ),
                      Container(
                        height: 44,
                        decoration: BoxDecoration(
                          color: const Color(0xFFF7F8FA),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        margin: const EdgeInsets.only(top: 20),
                        padding: const EdgeInsets.only(left: 20, right: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            const Text('Date of Birth',
                                style: TextStyle(
                                    fontSize: 12, fontWeight: FontWeight.normal, color: Color(0x4d000000))),
                            BtDatePickerWidget(
                              initialDate: model.birthday,
                              onSelectedDate: (String dateString) {
                                if (compareDateOfBirth(dateString, 18)) {
                                  EasyLoading.showToast('Must be at least 18 years old.');
                                  return;
                                }

                                model.setBirthday(dateString);
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                bottom: 118,
                left: 0,
                right: 0,
                child: Container(
                  height: 48,
                  margin: const EdgeInsets.only(left: 24, right: 24),
                  decoration: BoxDecoration(
                    color: const Color(0xFF4DB4FF),
                    borderRadius: BorderRadius.circular(39),
                  ),
                  child: TextButton(
                    onPressed: () {
                      EasyLoading.show(status: 'Loading...');
                      model.updateUserInfo((success, msg) {
                        if (success) {
                          context.router.pop();
                        }
                        EasyLoading.showToast(msg);
                      });
                    },
                    child: const Text('Submit', style: TextStyle(fontSize: 16, color: Colors.white)),
                  ),
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}
